import { Button, Switch, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useState } from "react";
import "./table.css";

interface DataType {
  key: React.Key;
  name: string;
  age: string;
  address: string;
  date: any;
  statu: any;
  cz: any;
}
var now = new Date();
var year = now.getFullYear(); // 获取当前年份
var month = now.getMonth() + 1; // 获取当前月份（注意返回值范围是0-11）
var day = now.getDate(); // 获取当前日期

const columns: ColumnsType<DataType> = [
  {
    title: "ID",
    dataIndex: "name",
  },
  {
    title: "小区名称",
    dataIndex: "age",
  },
  {
    title: "所属地区",
    dataIndex: "address",
  },
  {
    title: "添加时间",
    dataIndex: "date",
  },
  {
    title: "状态",
    dataIndex: "statu",
  },
  {
    title: "操作",
    dataIndex: "cz",
  },
];

const data: DataType[] = [];
for (let i = 0; i < 20; i++) {
  data.push({
    key: i,
    name: `${i}`,
    age: `天府国际${i}`,
    address: `四川 ${i}`,
    date: year + "年" + month + "月" + day + "日",
    statu: (
      <Switch checkedChildren="正常" unCheckedChildren="禁用" defaultChecked />
    ),
    cz: (
      <div className="cz">
        <Button size="small" type="primary">
          编辑
        </Button>
        <p>
          <Button size="small" type="primary" danger>
            删除
          </Button>
        </p>
      </div>
    ),
  });
}

const App: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  

  return (
    <div>
      <Table pagination={false} rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

export default App;
